<template>
  <div class="topic-detail">
    <div class="top-nav" :style="'top:' + paddingTop + 'px'">
      <van-nav-bar title="帖子详情" left-arrow @click-left="onClickLeft">
      </van-nav-bar>
    </div>
    <div class="top-pad"></div>
    <div class="full-card">
      <div class="head">
        <span class="left">
          <van-image round class="avatar" :src="topic.avatar_thumb" />
          <span class="u-name">{{ topic.user_nicename }}</span>
        </span>
        <!-- <span class="right"><van-icon name="arrow-down"/></span> -->
      </div>
      <div
        v-if="topic.type == 3"
        :class="topic.type == 3 ? 'title-txt' : 'title'"
      >
        <div class="left-t">短文</div>
        {{ topic.title }}
      </div>
      <div v-else style="margin:0 10px;margin-bottom:10px;">
        {{ topic.title }}
      </div>
      <div class="pic-list" v-if="topic.type == 4">
        <div class="pic-item" v-for="(img, index) in images" :key="img">
          <van-image
            width="120"
            height="120"
            :src="img"
            fit="cover"
            @click="preview(index)"
          />
        </div>
      </div>
      <div class="text-content" v-if="topic.type == 3">
        <pre style="width:100%;">
          <span v-html="topic.content"></span>
        </pre>
      </div>
      <div class="text-content" v-if="topic.type == 5">
        <video
          style="width:100%;"
          :poster="topic.video_thumb ? $host + topic.video_thumb : ''"
          :controls="played"
          ref="m-video"
          @click.stop="play($event)"
        />
      </div>
      <div v-if="topic.tag">
        <ti v-for="t in topic.tag.split(',')" :key="t" :text="t" />
      </div>
    </div>
    <topic-discuss class="topic-discuss" :topic="topic" />
    <div style="height:100px;background:#fff;"></div>
  </div>
</template>

<script>
import { ImagePreview } from "vant";
import TopicDiscuss from "@/components/TopicDiscuss";
import ti from "@/components/TagIcon";
export default {
  components: { TopicDiscuss, ti },
  name: "topic-detail",
  data() {
    return {
      topic: {},
      discussList: [],
      paddingTop: 0,
      played: false,
      images: []
    };
  },
  methods: {
    preview(index) {
      ImagePreview({
        images: this.images,
        startPosition: index,
        onClose() {}
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    checkFreeToday(e) {
      let k = "f_time_" + new Date().toLocaleDateString();
      k = k.replace("/", "").replace("/", "");

      let s = localStorage.getItem("videos");
      if (s) {
        s = JSON.parse(s);
      } else {
        s = [];
      }
      if (s.filter(v => v == this.topic.id).length > 0) {
        this.doPlay(e);
        return true;
      }
      //免费观影次数
      const freeTimes = 3;
      let leftTimes = localStorage.getItem(k);
      if (leftTimes == 0) {
        return false;
      }
      if (null == leftTimes) {
        leftTimes = freeTimes;
      }
      if (leftTimes > 0) {
        leftTimes--;
        let _this = this;
        this.$dialog
          .alert({
            title: "温馨提示",
            message: "今日免费观影次数剩余" + leftTimes + "次！"
          })
          .then(() => {
            s.push(_this.topic.id);
            localStorage.setItem("videos", JSON.stringify(s));
            _this.doPlay(e);
          });
      }
      localStorage.setItem(k, leftTimes);
      return true;
    },
    needVip(e) {
      let isPlay = this.checkFreeToday(e);
      if (!isPlay) {
        this.$dialog
          .alert({
            title: "温馨提示",
            message: "无播放次数，请升级会员！"
          })
          .then(() => {});
      }
    },
    play(e) {
      if (this.played) {
        this.doPlay(e);
      } else {
        this.$api.PostViewVideo(this.topic.id).then(r => {
          if (r.data.code == 0) {
            let allSeeNum = r.data.info.allSeeNum;
            let leftSeeNum = r.data.info.leftSeeNum;
            window.sessionStorage.setItem("allSeeNum", allSeeNum);
            window.sessionStorage.setItem("leftSeeNum", leftSeeNum);
            if (leftSeeNum == -1) {
              this.needVip(e);
              return;
            } else {
              this.doPlay(e);
              return;
            }
          } else {
            this.needVip(e);
            return;
          }
        });
      }
    },
    doPlay(e) {
      e.target.src = this.$host + this.topic.video;
      e.target.play();
      this.played = true;
      window.addEventListener("scroll", this.scrollHandle, true);
    }
  },
  created() {
    this.topic = this.$route.params;
    this.paddingTop = window.sessionStorage.getItem("paddingTop");
    if (
      this.topic.avatar_thumb &&
      this.topic.avatar_thumb.indexOf("http") == -1
    ) {
      this.topic.avatar_thumb = this.$host + this.topic.avatar_thumb;
    }
    if (this.topic.type == 4) {
      this.images = this.topic.images.split(",");
      let _this = this;
      for (var i = 0; i < this.images.length; i++) {
        this.images[i] = this.$host + this.images[i];
      }
    }
  }
};
</script>
<style lang="less">
.pic-list {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  padding: 7.5px;
  width: 360px;
  .pic-item {
    flex-basis: 120px;
    text-align: center;
  }
}
.m-pics {
  .van-hairline--top::after {
    border-top-width: 0 !important;
  }
}
.images-grid {
  margin: 10px;
  background: #fff;
  border: none !important;
  .van-grid-item {
    padding: 0;
    .van-grid-item__content {
      padding: 0 !important;
    }
    .van-hairline {
      border: none !important;
    }
    .van-hairline::after {
      border: none !important;
    }
  }
}
</style>
<style lang="less" scoped>
.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  .van-hairline--bottom::after {
    border-bottom: none;
  }
}
.top-pad {
  height: 40px;
}
.topic-detail {
  background: #f6f6f5;
}
.topic-discuss {
  background: #fff;
}

.full-card {
  background: #fff;
  margin-bottom: 10px;
  font-size: 20px;
  .head {
    padding: 10px;
    .left {
      width: 330px;
      display: inline-block;
      .avatar {
        width: 30px;
        height: 30px;
        vertical-align: middle;
      }
      .u-name {
        margin-left: 10px;
      }
    }
  }
  .title {
    padding: 0 10px;
    line-height: 40px;
    font-weight: 100;
  }
  .title-txt {
    padding: 10px 20px;
    line-height: 40px;
    font-weight: 100;
    background: #efefef;
    margin: 0 10px;
    font-size: 17px;
    border-radius: 5px;
    position: relative;
    .left-t {
      font-size: 10px;
      position: absolute;
      top: 0;
      left: 0;
      height: 16px;
      line-height: 16px;
      background: #fa98a4;
      color: #fff;
      padding: 1px 5px;
      border-radius: 5px 0 12px 0;
    }
  }
}
.text-content {
  padding: 13px;
  font-size: 16px;
  letter-spacing: 1px;
  pre {
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  textarea {
    width: 100%;
    outline: 0 none;
    border: none;
    // overflow: hidden;
  }
  video {
    max-height: 375px;
    background: #000;
  }
}
</style>
